import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import { Row, Col, Statistic, Divider, Button, Icon, Tooltip } from 'antd';

const OrgContent = props => {
  const { reduxItem, dispatch } = props;
  const { detailsItems } = reduxItem;
  const [listLength, setListLength] = useState(0);
  const [marginLeft, setMarginLeft] = useState(0);
  const [rightDisabled, setRightDisabled] = useState(0);
  useEffect(() => {
    if (detailsItems.length > 0) {
      const filterList = _.filter(detailsItems, x => x.isDisplay);
      if (filterList.length > 5) {
        setListLength(5);
      } else {
        setListLength(filterList.length);
      }
    }
  }, [detailsItems]);
  const setStatistic = (val, company, warningState) => {
    let color = 'rgba(51,51,51,1)';
    if (warningState === 'warning') color = '#F5212D';
    if (warningState === 'remind') color = '#FBAF1D';
    if (warningState === 'health') color = '#52C41A';
    if (val) {
      return (
        <Tooltip
          placement="top"
          title={
            <Statistic
              value={
                company === '年' || company === '月' || company === '%' || company === ''
                  ? val
                  : (_.toNumber(val) / 100000000).toFixed(2)
              }
              valueStyle={{ color: '#fff' }}
            />
          }
        >
          <div className="ellipsis text-ellipsis">
            <Statistic
              value={
                company === '年' || company === '月' || company === '%' || company === ''
                  ? val
                  : (_.toNumber(val) / 100000000).toFixed(2)
              }
              valueStyle={{
                color,
                width: '100%',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            />
          </div>
        </Tooltip>
      );
    }
    return '-';
  };
  const dotBgColor = type => {
    let color = '#ccc';
    if (type === 'warning') color = '#F5212D';
    if (type === 'remind') color = '#FBAF1D';
    if (type === 'health') color = '#52C41A';
    return color;
  };
  // 点击预警区域下钻
  const handlerWarningOrgDrillDown = id => {
    const currentValue = _.filter(reduxItem.tree, x => x.orgdepid === id);
    const { orgnofullpath, hrOrgTypeId, orgdepid } = currentValue[0];
    dispatch({
      type: 'MonitoringConsole/getOrgIds',
      payload: {
        orgIds: {
          ...reduxItem.orgIds,
          orgdepid,
          hrOrgTypeId,
          orgnofullpath,
        },
        getTree: reduxItem.getTree,
      },
    });
  };
  const handlerPagingBtn = key => {
    const xhOrgContents = document.getElementsByClassName('xh-org-contents')[0];
    const cardW = xhOrgContents.offsetWidth / listLength + 10;
    const filterList = _.filter(detailsItems, x => x.isDisplay);
    const totalW = (filterList.length * xhOrgContents.offsetWidth) / listLength;
    if (key === 'right') {
      setMarginLeft(marginLeft - cardW);

      setRightDisabled(totalW - marginLeft * -1 <= xhOrgContents.offsetWidth);
    }
    if (key === 'left') {
      setMarginLeft(marginLeft + cardW);
      setRightDisabled(false);
    }
  };
  return (
    <div className="org-content">
      <div className="xh-org-contents" style={{ marginLeft: `${marginLeft}px` }}>
        {detailsItems.map(val => {
          let element = <></>;
          if (val.isDisplay) {
            element = (
              <div className="card" key={val.key} style={{ width: `calc(100% / ${listLength})` }}>
                <div className="header">
                  <span className="title">{val.name}</span> &nbsp;&nbsp;
                  {val.company !== '' ? (
                    <span className="snb-title">{`(单位：${val.company})`}</span>
                  ) : null}
                </div>
                <Divider />
                <div className="content">
                  <Row gutter={[10, 10]}>
                    {val.list.map(v => (
                      <Col key={v.orgId}>
                        <Row type="flex" justify="space-between" align="middle">
                          <Col span={18}>
                            <Tooltip placement="top" title={v.orgName}>
                              <Button
                                className="text-ellipsis"
                                style={{ textAlign: 'left' }}
                                type="link"
                                size="small"
                                key={v.orgName}
                                onClick={() => handlerWarningOrgDrillDown(v.orgId)}
                              >
                                {v.orgName}
                              </Button>
                            </Tooltip>
                            <div
                              className="dots"
                              style={{ background: dotBgColor(v.resourceStatus) }}
                            ></div>
                          </Col>
                          <Col span={5} style={{ textAlign: 'right' }}>
                            {setStatistic(v.quotaVal, val.company, v.resourceStatus)}
                          </Col>
                        </Row>
                      </Col>
                    ))}
                  </Row>
                </div>
              </div>
            );
          }
          return element;
        })}
      </div>

      <div className="xh-paging-btn">
        <Button onClick={() => handlerPagingBtn('left')} disabled={marginLeft >= 0}>
          <Icon type="left" />
        </Button>
        <div style={{ height: '5px' }}></div>
        <Button onClick={() => handlerPagingBtn('right')} disabled={rightDisabled}>
          <Icon type="right" />
        </Button>
      </div>
    </div>
  );
};

export default OrgContent;
